<template>
  <div class="box">
    <a-page-header
      v-if="hasHeader"
      style="border: 1px solid rgb(235, 237, 240); background: #ffff"
      title="招商中心装修"
      @back="() => $router.back()"
    />
    <a-row class="content-box">
      <a-col
        class="hide-scroller-bar"
        style="
          margin: 20px 10px;
          border-radius: 5px;
          width: calc(100% - 310px);
          overflow-y: auto;
          height: calc(100% - 40px);
        "
      >
        <business-home
          :current="collapseList"
          @getCurrentIndex="getCurrentIndex"
        ></business-home>
      </a-col>
      <a-col class="right">
        <businessRight
          v-model:current="collapseList"
          :currentAlias="currentAlias"
        />
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { computed, defineComponent, reactive, ref, toRefs, watch } from "vue";
import { PlusOutlined, EditOutlined } from "@ant-design/icons-vue";
import utils from "../../../common/utils/utils";
import request from "../../../common/utils/request";
import { message } from "ant-design-vue";
import store from "../../../store";
import businessHome from "./businessHome.vue";
import businessRight from "./businessRight.vue";
export default defineComponent({
  name: "InvestmentDecorationNew",
  components: { PlusOutlined, EditOutlined, businessHome, businessRight },
  props: {
    status: {
      type: Number || String,
      default: 1,
    },
  },

  setup(props) {
    const uniqId = (randomLength = 12) => {
      return Number(
        Math.random().toString().substr(2, randomLength) + Date.now()
      ).toString(36);
    };
    const state = reactive({
      hasHeader: true,
      currentAlias: "MainDrawing",
      collapseList: [
        {
          name: "主图",
          tip: "建议上传1920*680尺寸",
          image: true,
          imgList: [
            {
              url: utils.staticPath + `images/village/banner.png`,
            },
          ],
          alias: "MainDrawing",
        },
        {
          switch: true,
          name: "推广区1",
          alias: "PromotionArea1",
          tip: "建议上传1:1尺寸的图标",
          itemList: [
            {
              title: "真实数据实时更新",
              isInput: false,
              imgList: [
                {
                  status: "done",
                  url: utils.staticPath + `images/village/shuju.png`,
                },
              ],
              isLink: 1, //1是  2不是
              linkData: {},
            },
            {
              title: "直连业主安心透明",
              isInput: false,
              imgList: [
                {
                  url: utils.staticPath + `images/village/anxin.png`,
                },
              ],
              isLink: 1, //1是  2不是
              linkData: {},
            },
            {
              title: "便捷灵活快速响应",
              isInput: false,
              imgList: [
                {
                  url: utils.staticPath + `images/village/bianjie.png`,
                },
              ],
              isLink: 1, //1是  2不是
              linkData: {},
            },
            {
              title: "无中介0佣金",
              isInput: false,
              imgList: [
                {
                  url: utils.staticPath + `images/village/yongjin.png`,
                },
              ],
              isLink: 1, //1是  2不是
              linkData: {},
            },
          ],
        },
        {
          switch: true,
          name: "资讯栏",
          title: "资讯信息",
          alias: "Information",
          tip: "",
          show_max_num: 5,
          tabList: [],
          list: [],
        },
        {
          switch: true,
          name: "推广区2",
          title: "生活服务",
          tip: "建议上传270*270尺寸",
          content: "全方位保障服务",
          isInput: false,
          alias: "PromotionArea2",
          columns: 8,
          itemList: [
            {
              key: uniqId(),
              title: "法律法规",
              subTitle: "查看",
              isInput: false,
              imgList: [
                {
                  url: utils.staticPath + `images/village/shuju.png`,
                },
              ],
              linkData: {},
            },
          ],
        },
        {
          switch: true,
          name: "推广区3",
          title: "重点企业",
          itemList: [
            {
              title: "合肥被岸互联网格目技有限公司",
              img: "",
              url: "https://app.kuaijingai.com/",
              address: "安道直合起市国山区亚夏气车大显100号",
            },
          ],
          show_max_num: 10,

          alias: "PromotionArea3",
        },
        {
          switch: true,
          name: "推广区4",
          title: "政企服务",
          columns: 8,
          tip: "建议上传270*270尺寸",
          itemList: [
            {
              key: uniqId(),
              title: "招商加盟",
              subTitle: "查看",
              isInput: false,
              imgList: [
                {
                  url: utils.staticPath + `images/village/shuju.png`,
                },
              ],

              linkData: {},
            },
          ],

          alias: "PromotionArea4",
        },
        {
          title: "热门大厦",

          list: [],
          alias: "hotHouse",
        },
        {
          title: "写字楼",
          list: [],
          alias: "officeHouse",
        },
        {
          switch: true,
          name: "推广区5",
          alias: "PromotionArea5",

          imgList: [
            {
              url: utils.staticPath + `images/village/bottom_mobile.png`,
            },
          ],
          title: "租赁更放心",
          content: "全方位保障服务",
        },
        {
          name: "底部栏",
          alias: "Foot",
          title: "All Rights Reserved",
          isInput: false,
        },
      ],
      loading: false,
      listShow: false,
      resetList: [],
      tabPageSize: 5, //资讯信息的分页大小,
      companyPageSize: 10, //重点企业分页大小
    });

    const initHeader = () => {
      if (props.status == 0) {
        state.hasHeader = false;
      }
    };
    initHeader();

    const getCurrentIndex = (alias) => {
      state.currentAlias = alias;
    };
    // 获取配置
    const getHomePgae = () => {
      let params = {};

      if (state.radio == "mobile") {
        params = { is_mobile: 1 };
      }
      params.org_id = store.getters.userInfo.org_id;
      request.get("/village", "/clue/home/page", { ...params }).then((res) => {
        state.collapseList =
          Object.keys(res.list).length == 0
            ? state.collapseList
            : res.list.content;

        state.collapseList.map((item) => {
          if (item.alias == "Information") {
            state.tabPageSize = item.show_max_num;
          }
          if (item.alias == "PromotionArea3") {
            state.companyPageSize = item.show_max_num;
          }
        });
        getCompanyList();
        informationCateList();
        getInformationList();
        getIPCity();

        request
          .get("/village", "/clue/home/page", {
            org_id: store.getters.userInfo.org_id,
            is_mobile: 1,
          })
          .then((res) => {
            res.list = !res.list ? {} : res.list;
            state.collapseList.forEach((item) => {
              if (item.alias == "MainDrawingMobile") {
                item.alias = "";
              }
            });
            if (res.list.content && res.list.content.length > 0) {
              state.collapseList.push(res.list.content[0]);
            } else {
              state.collapseList.push({
                name: "移动端主图",
                tip: "建议上传650*550尺寸",
                image: true,
                imgList: [
                  {
                    url: utils.staticPath + `images/village/banner3.png`,
                  },
                ],
                alias: "MainDrawingMobile",
                currentAlias: "MainDrawing",
              });
            }
          });
      });
    };
    const getInformationList = () => {
      request
        .get("/work_notice", "/owner/noticeList", {
          org_id: store.getters.userInfo.org_id,
          page: 1,
          pageSize: state.tabPageSize,
          cat_id: state.currentTab,
          notice_show_index: true,
        })
        .then((res) => {
          console.log(res, "res.datares.datares.datares.data");
          state.collapseList.map((item) => {
            if (item.alias == "Information") {
              item.list = res.list;
            }
          });
        })
        .finally(() => {});
    };
    const informationCateList = () => {
      request
        .get("/work_notice", "/owner/notice/cateList", {
          page: 1,
          limit: 100,
          org_id: store.getters.userInfo.org_id,
        })
        .then((res) => {
          console.log(res, "aaaaaaaaaaa");
          state.collapseList.map((item) => {
            if (item.alias == "Information") {
              item.tabList = res.data;
              item.tabList.unshift({ id: 0, cat_name: "全部" });
            }
          });
          // settingList.value = res.list;
        })
        .finally(() => {});
    };
    const getCompanyList = () => {
      request
        .get("/org", "/owner/manage/pointFirm", {
          page: 1,
          pageSize: state.companyPageSize,
          org_id: store.getters.userInfo.org_id,
        })
        .then((res) => {
          console.log(res, "aaaaaaaaaaa222");
          state.collapseList.map((item) => {
            if (item.alias == "PromotionArea3") {
              item.itemList = res.list;
            }
          });
          // settingList.value = res.list;
        })
        .finally(() => {});
    };
    const getIPCity = () => {
      // 获取当前ip所在城市
      request
        .get("/public", "/location/ip", {
          org_id: store.getters.userInfo.org_id,
        })
        .then((res) => {
          // 根据当前城市获取项目信息
          if (res.city) {
            getCurrentCity(res.city.area_code);
          }
        });
    };
    // 根据城市id获取项目信息
    const getCurrentCity = (city_id) => {
      request
        .get("/village", "/user/city/default", {
          city_id,
          org_id: store.getters.userInfo.org_id,
        })
        .then((res) => {
          if (res.city) {
            getHotListAndOffice(res.city);
          }
        });
    };
    // 获取热门大厦
    const getHotListAndOffice = (currentCity) => {
      if (currentCity && currentCity.city_id) {
        request
          .get("/village", "/clue/mobile/home", {
            city_id: currentCity.city_id,
            org_id: store.getters.userInfo.org_id,
          })
          .then((res) => {
            state.collapseList.map((cItem) => {
              if (cItem.alias == "hotHouse") {
                cItem.list = res.hot_village_list;
              }
              if (cItem.alias == "officeHouse") {
                cItem.list = res.roomTypeListArr;

                if (cItem.list && cItem.list.length > 0) {
                  cItem.list.forEach((item) => {
                    request
                      .get("/village", "/clue/mobile/homeRoomList", {
                        city_id: currentCity.city_id,
                        room_type: item.value,
                        room_limit: 4,
                        org_id: store.getters.userInfo.org_id,
                      })
                      .then((res) => {
                        // 最多显示4个
                        if (res.list && res.list.length > 4) {
                          res.list.splice(0, 4);
                        }
                        item.list = res.list;
                      });
                  });
                }
              }
            });
          });
      }
    };
    getHomePgae();

    return {
      ...toRefs(state),
      getCurrentIndex,
    };
  },
});
</script>

<style lang="less" scoped>
.box {
  width: 100%;
  height: 100%;

  :deep(.ant-tabs-nav) {
    width: 100%;
  }
  :deep(.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab) {
    width: 49%;
  }
  :deep(.ant-tabs-bar) {
    margin: 0 0 10px 0;
  }
  .content-box {
    width: 100%;
    height: calc(100% - 80px);
    overflow: hidden;
    .left {
      padding: 20px;
      width: 285px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .text {
        font-size: 12px;
        color: #aaaaaa;
        padding-top: 5px;
        text-align: center;
        width: 100%;
      }
      .modify {
        cursor: pointer;
      }
      .promotionArea {
        :deep(.ant-upload.ant-upload-select-picture-card) {
          width: 80px;
          height: 80px;
          margin-bottom: 0px;
        }
        :deep(.ant-upload-list-picture-card .ant-upload-list-item) {
          width: 80px;
          height: 80px;
        }
        :deep(.ant-upload-list-picture-card-container) {
          width: 80px;
          height: 73px;
        }
      }
    }
    .foot {
      position: fixed;
      bottom: 25px;
      width: 245px;
      display: flex;
      justify-content: space-between;
    }
  }
}
.right {
  width: 280px;
  float: right;
  margin: 20px 10px 20px 0;
  background: #fff;
  box-shadow: -3px 0px 8px 0px rgba(0, 0, 0, 0.1);
}
</style>
